<template>
  <!--收货人-->
  <div class="consignee-index">
    <order-module-title title="收货人"/>
    <div class="consignee-body">
      <div class="body-item item-title item-border"><span style="color: red">*</span>收货方</div>
      <div class="body-item item-title item-border"><span style="color: red">*</span>收货人</div>
      <div class="body-item item-title item-border"><span style="color: red">*</span>联系电话</div>
      <div class="body-item item-title item-border"><span style="color: red">*</span>收获地址</div>

      <div class="body-item item-border">
        <el-input type="text" v-model="data.consignee" placeholder="请输入"/>
      </div>
      <div class="body-item item-border">
        <el-input type="text" v-model="data.name" placeholder="请输入"/>
      </div>
      <div class="body-item item-border">
        <el-input type="text" v-model="data.phone" placeholder="请输入"/>
      </div>
      <div class="body-item item-border">
        <el-input type="text" v-model="data.address" placeholder="请输入"/>
      </div>

      <div style="clear: both"></div>
    </div>
  </div>
</template>

<script>
import OrderModuleTitle from "@/components/order/component/OrderModuleTitle";

export default {
  name: "ConsigneeIndex",
  components: {
    OrderModuleTitle,

  },
  data(){
    return{
      data:{
        consignee: '',
        name: '',
        phone: '',
        address: '',
      }
    }
  }
}
</script>

<style scoped lang="scss">
.consignee-index{
  margin-top: 20px;
}
.consignee-body {
  margin:10px 0;
  width: 220px * 4 + 1px;
  max-width: 220px * 4 + 1px;
  text-align: center;
  border-top: 1px black solid;
  border-left: 1px black solid;

  .body-item {
    width: 220px;
    float: left;
    height: 42px;
    line-height: 42px;
    font-size: 15px;
  }

  .item-title {
    background-color: #B3C0D1;
  }

  .item-border {
    border-right: 1px black solid;
    border-bottom: 1px black solid;
  }

}
</style>